iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1

今天是鐵人賽的第四天,今天是我們最後一天專門學習跟VSCode有關的基礎觀念。或許有讀者想快速進入實戰,但請相信筆者,今天了解的觀念,絕對會對我們開發extension大有幫助。

VSCode Command命令概覽


在VSCode裡,一切操作都跟Command有關,當我們點擊了extension在explorer的TreeView觸發行為,我們執行了Command。當我們使用了快捷鍵開啟panel,我們也執行了Command。

在VSCode裡面,除了程式、手動觸發,在VSCode提供給一般使用者觸發command的情境,主要由下面兩者觸發:

  1. Command Palette:透過在command palette裡執行選取task的task觸發命令。

  2. KeyBindings: 當我們點擊快捷鍵,即會觸發Command命令,快捷鍵可以在工作區使用keybindings.json自訂。

來自第三方extension的command或者是VSCode editor內建的command,都可以被使用者訪問到,甚至也可以被我們要開發的新的extension訪問、執行。

那麼,我們有什麼方法了解有哪些內建Command可以使用呢?

檢視所有VSCode已被註冊的Command


當我們打算檢視所有已被註冊在VSCode的Command,不管是內建的,還是第三方的extesnion,透過Keyboard Shortcut頁面即可一覽無遺。

Keyboard Shortcut和之前settings頁面同一階層,因此,在mac裡,我們即可順著Code > Preferences > Keyboard Shortcuts路徑依次選取選項開啟頁面。另外,我們也可以在Command Palette裡使用昨天提到的Preference系列選項中的Preference: Open Keyboard Shortcuts開啟它。

Windows或linux的使用者請依次選取 File > Preferences > Keyboard Shortcuts 打開設定。

在Keyboard Shortcut的table裡,可以看到當前command對應kindbinding的快捷鍵,以及觸發時的條件when。

讓我們在把keyborad shortcut往下滾動,直到沒有對應keybinding的command...

我們可以看到第三方套件的.NET command,即使沒有對應的keybindings跟when條件,只要是跟VSCode註冊過Command的,一律被列在表中。這對我們來講真的是一個好消息,我們可以在同一個Keyboard Shortcuts表中,方便的檢視所有command,並且透過搜尋條快速查找。

同時,我們還可以在Keyboard Shortcuts表中直接手動設置第三方套件的快捷鍵喔!

快捷建設定規則(Keybinding Rules)


在VSCode裡面,keyboard shortcut屬於全域,我們也跟settings.json一樣點擊右上角Open Keyboard Shortcutsicon 切換到json模式檢查所有新加的keybindings.json。

同樣的,我們可以跟昨天一樣在.vscode資料夾下面新增keybindings.json設定workspace scope的快捷設定覆蓋user level的設定。

keybings.json的設定範例如下:


[
 { 
  "key": "f5",              
  "command": "workbench.action.debug.start",   
  "when": "!inDebugMode" 
 },
 ...
]

當我們要設置keybindings,即可在設定檔中添加一個rule物件,物件包含我們看到的三個屬性,分別是:

  • key: 指定的快捷鍵
  • command: 命令的id,依照convention命令id最前面都會加上namespace,在範例裡是workbench。
  • when: when語句裡需要回傳一個boolean,當為true時,才會正確執行keybindings,when語句裡可以使用vscode裡的各種context狀態做boolean operation(===, &&...)比較。在本例中,when語句會判斷mode context裡的inDebugMode是否為false,當為false時綁定的快捷鍵才可執行。

Tips: 在VSCode的keybings文件裡,條列了VSCode各種狀態的context的列表,可以讓我們在command的when語句裡判斷。日後設計extension command時記得還有這些context狀態可以使用喔!

結語


好啦,今天的command介紹就到這裡了,相信大家應該對command命令有一定的認識了。明天我們將開始第一個extension,並直接練習註冊extension的command範例。

我們明天見,掰掰!

本日參考文件



上一篇
Day03 | VSCode使用者與工作區設定
下一篇
Day05 | 在Extension專案裡執行第一個Command命令吧
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言